<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const destinations = ref([]);
const loading = ref(true);

// 模拟目的地数据
const mockDestinations = [
  {
    id: 1,
    name: '北京',
    category: '城市',
    rating: 4.8,
    location: '中国北京',
    description: '中国首都，历史文化名城，拥有众多世界文化遗产。',
    image: '/travel-images/1 (5).png',
    weather: '四季分明',
    best_time_to_visit: '春秋',
    price: 0
  },
  {
    id: 2,
    name: '上海',
    category: '城市',
    rating: 4.7,
    location: '中国上海',
    description: '国际大都市，融合现代与传统，东方巴黎。',
    image: '/travel-images/1 (6).png',
    weather: '温暖湿润',
    best_time_to_visit: '春秋',
    price: 0
  },
  {
    id: 3,
    name: '杭州',
    category: '城市',
    rating: 4.9,
    location: '中国浙江',
    description: '人间天堂，西湖美景闻名天下。',
    image: '/travel-images/1 (8).png',
    weather: '温和湿润',
    best_time_to_visit: '春夏',
    price: 0
  },
  {
    id: 4,
    name: '成都',
    category: '城市',
    rating: 4.8,
    location: '中国四川',
    description: '天府之国，美食之都，熊猫故乡。',
    image: '/travel-images/1 (9).png',
    weather: '四季宜人',
    best_time_to_visit: '全年',
    price: 0
  },
  {
    id: 5,
    name: '西安',
    category: '历史文化',
    rating: 4.8,
    location: '中国陕西',
    description: '十三朝古都，丝绸之路起点。',
    image: '/travel-images/1 (4).png',
    weather: '四季分明',
    best_time_to_visit: '春秋',
    price: 0
  },
  {
    id: 6,
    name: '青海湖',
    category: '自然风光',
    rating: 4.9,
    location: '中国青海',
    description: '中国最大的内陆湖，高原明珠。',
    image: '/travel-images/1 (7).png',
    weather: '高原气候',
    best_time_to_visit: '6-8月',
    price: 100
  }
];

// 获取目的地列表
const fetchDestinations = () => {
  loading.value = true;
  // 模拟API请求延迟
  setTimeout(() => {
    destinations.value = mockDestinations;
    loading.value = false;
  }, 500);
};

// 跳转到目的地详情页
const goToDetail = (id) => {
  router.push(`/destination/${id}`);
};

// 组件挂载时获取数据
onMounted(() => {
  fetchDestinations();
});
</script>

<template>
  <div class="destination-container">
    <div class="page-header">
      <h1>热门目的地</h1>
      <p>探索世界各地的精彩旅行目的地</p>
    </div>
    
    <!-- 目的地分类筛选 -->
    <div class="filter-section">
      <div class="filter-tags">
        <span class="filter-tag active">全部</span>
        <span class="filter-tag">城市</span>
        <span class="filter-tag">自然风光</span>
        <span class="filter-tag">历史文化</span>
        <span class="filter-tag">海滩度假</span>
      </div>
    </div>
    
    <!-- 目的地列表 -->
    <div v-if="loading" class="loading">
      <p>加载中...</p>
    </div>
    
    <div v-else class="destination-grid">
      <div 
        v-for="dest in destinations" 
        :key="dest.id" 
        class="destination-card"
        @click="goToDetail(dest.id)"
      >
        <div class="card-image">
          <img :src="dest.image" :alt="dest.name" />
          <div class="card-overlay">
            <span class="category-tag">{{ dest.category }}</span>
            <span class="rating">{{ dest.rating }}</span>
          </div>
        </div>
        <div class="card-content">
          <h3 class="card-title">{{ dest.name }}</h3>
          <p class="card-location">{{ dest.location }}</p>
          <p class="card-description">{{ dest.description }}</p>
          <div class="card-footer">
            <span class="best-time">最佳时间：{{ dest.best_time_to_visit }}</span>
            <span v-if="dest.price > 0" class="price">¥{{ dest.price }}</span>
            <span v-else class="price-free">免费</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.destination-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #666;
}

.filter-section {
  margin-bottom: 30px;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.filter-tag {
  padding: 8px 20px;
  background-color: #f5f5f5;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-tag:hover {
  background-color: #ff9c00;
  color: white;
}

.filter-tag.active {
  background-color: #ff9c00;
  color: white;
}

.loading {
  text-align: center;
  padding: 50px;
  color: #666;
}

.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 30px;
}

.destination-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.destination-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.destination-card:hover .card-image img {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
}

.category-tag {
  background-color: rgba(255, 156, 0, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
}

.rating {
  background-color: rgba(255, 255, 255, 0.9);
  color: #ff9c00;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.card-content {
  padding: 20px;
}

.card-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 8px;
}

.card-location {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.card-description {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.best-time {
  font-size: 12px;
  color: #666;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #ff6b6b;
}

.price-free {
  font-size: 16px;
  font-weight: bold;
  color: #48bb78;
}

@media (max-width: 768px) {
  .destination-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
}
</style>